#include("/front/family/_layout.html")
#@layout()
#define layoutImportcss()
<link rel="stylesheet" href="/front/css/framework7-icons.css">
<link rel="stylesheet" href="/static/other/attendanceCalendar/css/style.css?v=0.3" type="text/css" />
#end
#define layoutHead()
<title>考勤 - 家长端</title>
<style>
	.day-n>span {
			background-color:#ff0000 !important;
			color:#fff !important;
		}
		.day-y>span {
			background-color:#5aadff !important;
			color:#fff !important;
		}
	.demo-card-header-pic .card-header {
	  height: 40vw;
	  background-size: cover;
	  background-position: center;
	  color: #fff;
	}
	.demo-card-header-pic .card-leave {
	  color: #8e8e93;
	  font-size: 14px;
	  margin: 5px auto;
	}
	.demo-card-header-pic .card-content-padding .date{
	  color: #8e8e93;
	}
	</style>
#end
#define layoutHome()
<div class="navbar">
	<div class="navbar-inner toolbstyle">
		<div class="left">
			<a href="javascript:window.location.href='/front/family/classes'" class="link back">
				<i class="icon icon-back"></i>
			</a>
		</div>
		<div class="title">宝宝考勤 </div>
		<div class="right">
		</div>
	</div>
</div>
<div class="page-content active-page-content infinite-scroll-content">
	<div class="block1">
		<div class="div_changeMonth"></div>
		<div class="div_calendar_title">
			<h1 id="current_month_label">自定义日历</h1><span onclick="nextMonth();getAttandence();">下一月</span><span onclick="upMonth();getAttandence();">上一月</span><span></span>
		</div>
		<div id="calendar_div" class="div_calendar"></div>
		<div id="current_date_label" class="div_target_label"></div>
	</div>
	<div class="card demo-card-header-pic">
		<div class="card-content card-content-padding">
			<p>
				<span class="title">本月考勤</span>
				<span class="date" style="float: right;" id="call_state_rate">出勤率：-</span>
			</p>
			<p>
				<div class="row div_calendar">
					<div class="col-33"><span class="attandence call-state-1" style="color:#fff;width:50px;">-</span><div class="card-leave">出勤</div></div>
					<div class="col-33"><span class="matterleave call-state-2" style="color:#fff;width:50px;">-</span><div class="card-leave">事假</div></div>
					<div class="col-33"><span class="sickleave call-state-3" style="color:#fff;width:50px;">-</span><div class="card-leave">病假</div></div>
				</div>
			</p>
		</div>
	</div>
</div>

#end
#define layoutImportjs()
<script src="/static/other/attendanceCalendar/script/date.js"></script>
<script src="/static/other/attendanceCalendar/script/attendanceCalendar.js"></script>
#end
#define layoutScript()
<script type="text/javascript">
	$$('.div_changeMonth span').on('click', function(){
		getAttandence();
	});
	function countRollCall(list_data){
		//console.log(list_data);
		var call_num = 0;
		var all_num = 0;
		// 出勤
		var rds = list_data.filter(function (e) { return e.roll_call_state == 1; });
		$$('.call-state-1').text(rds.length);
		call_num = rds.length;
		all_num = rds.length;
		// 事假
		rds = list_data.filter(function (e) { return e.roll_call_state == 2; });
		$$('.call-state-2').text(rds.length);
		all_num += rds.length;

		// 事假
		rds = list_data.filter(function (e) { return e.roll_call_state == 3; });
		$$('.call-state-3').text(rds.length);
		all_num += rds.length;

		if (call_num>0 && all_num>0){
			$$('#call_state_rate').html('出勤率:'+(call_num/all_num*100).toFixed(0)+'%');
		}else{
			$$('#call_state_rate').html('出勤率:0%');
		}
		
	}
	function getAttandence(){
		var arrdate = $$('#current_date_label').text().split('-');
		var strdate = arrdate[0]+''+arrdate[1];
		//console.log(m);
		sendPost('/front/family/attendance/getattendance?curdate='+strdate, null, function(res){
			//console.log(res);
			if (res.code == 200 && isJsonProps(res, 'listcall')){
				for(var i=0; i<res.listcall.length; i++){
					var jdata = res.listcall[i];
					var state = jdata.roll_call_state;
					var day = formatDate(jdata.add_time, 'd');
					if (state<5){
						var strclass = 'attandence';
						if (state == 2){ strclass="matterleave"; }
						else if (state == 3){ strclass="sickleave"; }
						$$('span[dayofmonth="'+day+'"]').addClass(strclass);
					}
				}
				countRollCall(res.listcall);
			}
		});
	}
	getAttandence();
</script>
#end
